*,
*::before,
*::after {
  box-sizing: border-box; /* 避免 padding 导致的溢出 */
}

 body {
  margin: 0;
  padding: 0;
  height: 100%; /* 保证页面占满视口 */
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡 */
  background-color: var(--main-bg-color);
  /* 背景颜色，类似品牌色背景 */
  color: var(--main-color);
}
p{
  margin: 0;
  padding: 0;
}
:root {
  --key-color: #333;
  --main-color: #4e5358;
  --main-shadow: rgba(24, 24, 24, 0.1);
  --muted-color: #b4b6bb;
  --muted-2-color: #888a8f;
  --muted-3-color: #636469;
  --body-bg-color: #ffffff; /* 默认背景色 */
  --main-bg-color:  #f7f6f5; /* 默认背景色 */
  --muted-bg-color: #f0f0f0; /* 默认背景色 */
  --main-border-color: rgba(114, 114, 114, 0.1);
  --muted-border-color: rgba(184, 184, 184, 0.02);
  --blur-bg:#fefdfc;
  --float-btn-bg: rgba(70, 70, 70, 0.4);
  --header-bg: var(--blur-bg);
  --header-color: var(--main-color);
  --footer-bg: var(--main-bg-color);
  --footer-color: var(--muted-2-color);
  --tomingbgcolor:rgba(255, 255, 255, 0.43)
}

/* 如果处于暗黑模式时，修改变量值 */
.dark-theme {
  --key-color: #f8fafc;
  --main-color: #e5eef7;
  --main-shadow: rgba(24, 24, 24, 0.1);
  --muted-color: #b4b6bb;
  --muted-2-color: #888a8f;
  --muted-3-color: #636469;
  --body-bg-color: #292a2d;  /* 暗黑模式背景 */
  --main-bg-color: #323335;  /* 暗黑模式背景 */
  --muted-bg-color: #2d2e31; /* 暗黑模式背景 */
  --main-border-color: rgba(114, 114, 114, 0.1);
  --muted-border-color: rgba(184, 184, 184, 0.02);
  --w-e-textarea-bg-color: #292a2d;
  --w-e-toolbar-bg-color: #292a2d;
  --blur-bg: rgba(50, 51, 53, 0.8);
  --float-btn-bg: rgba(70, 70, 70, 0.4);
  --header-bg: var(--blur-bg);
  --header-color: var(--main-color);
  --footer-bg: var(--main-bg-color);
  --footer-color: var(--muted-2-color);
  --w-e-textarea-color: #fff;
  --w-e-toolbar-color: #fff;
  --tomingbgcolor:var(--blur-bg); /* 红、绿、蓝、透明度(0-1) */
}
#app {
  margin: 0 auto;
  height: 100%; /* 使 #app 高度填满 body */
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡 */
  background-color: var(--main-bg-color);
  /* 背景颜色，类似品牌色背景 */
  color: var(--main-color);
}
